import React, { memo, Suspense, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { countriesCodeListAction } from "./store/actionTypes";

import { HashRouter } from "react-router-dom";
import { renderRoutes } from "react-router-config";
import ScrollToTop from "@/components/scrollToTop";
import routes from "@/router";
import AppHeader from "@/components/appHeader";
import AppFooter from "@/components/appFooter";
import Player from "../player";
import Loading from "@/components/loading";

export default memo(function Main() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(countriesCodeListAction());
  }, [dispatch]);

  const state = useSelector(
    (state) => ({
      countriseInfo: state.getIn(["mainInfo", "countriesCode"]),
    }),
    shallowEqual
  );

  const aa = () => {
    console.log("111");
  };

  return (
    <div>
      <HashRouter>
        <ScrollToTop>
          <AppHeader />
          <Suspense fallback={<Loading />}>
            {renderRoutes(routes)}
            <AppFooter />
          </Suspense>
          <Player />
        </ScrollToTop>
      </HashRouter>
    </div>
  );
});
